<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrap" style="position: fixed;right: 0;bottom: 0;margin: 20px;z-index: 10000">
        <span>drag</span>
    </div> 

    <script>
        let oWrap = document.querySelector(".wrap")

        dragBind(oWrap)
        
        function dragBind(el) {
            console.log('函数执行了')
            // window.dragElTopIndex = 1000
            const oDiv = el // 当前元素
            // document.onselectstart = () => {
            //     return false
            // }
            oDiv.onmousedown = e => {
                // console.log(e)
                // 如果点击的元素有 noDrag属性，则不触发拖动
                const elWidth = oDiv.offsetWidth
                const elHeight = oDiv.offsetHeight

                // 鼠标按下时的鼠标所在的X，Y坐标
                // 鼠标按下，改为fixed定位
                oDiv.style.position = 'fixed'
                // oDiv.style.zIndex = window.dragElTopIndex++
                // oDiv.classList.add('box-shadow-big')

                // 计算当前元素距离可视区的距离
                const marginTop = oDiv.style.marginTop ? parseInt(oDiv.style.marginTop) : 0
                const marginRight = oDiv.style.marginRight ? parseInt(oDiv.style.marginRight) : 0
                const disX = e.clientX - oDiv.offsetLeft - marginRight
                const disY = e.clientY - oDiv.offsetTop + marginTop

                document.onmousemove = e => {
                    console.log('鼠标移动事件')
                    // 通过事件委托，计算移动的距离
                    // 因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值
                    const l = e.clientX - disX
                    // 计算元素距离视口右边距
                    const r = window.innerWidth - l - elWidth
                    const t = e.clientY - disY
                    // 计算移动当前元素的位置，并且给该元素样式中的right和top值赋值
                    // 这里用right定位，因为小组件的关闭按钮再右上方，避免隐藏后按钮移位
                    if ((r > 0 - marginRight) && (r + elWidth < window.innerWidth - marginRight)) {
                        oDiv.style.right = r + 'px'
                    }
                    if ((t > 0 - marginTop) && (t + elHeight < window.innerHeight - marginTop)) {
                        oDiv.style.top = t + 'px'
                    }
                }
                document.onmouseup = e => { // 鼠标抬起，清空之前所在的位置，新拖拽的位置已生成并赋值
                    document.onmousemove = null
                    document.onmouseup = null
                }
                // return false不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
                return false
            }
        }

    </script>
</body>

</html>